<template>
	<view>
		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		  <view class="status_bar"></view>
		  <!-- #endif -->
		<view class="head">
			<image src="../../static/images/arrow_left.png" mode="" @click="$back()"></image>
			<view class="">客户:{{ addy.customer_name }}</view>
			<view class="f32" @click="allaw">全选</view>
		</view>
		<view class="numberLeft">订单号：{{ addy.order_no }}</view>
		<view class="" v-for="(item, father) in arry">
			<view class="photo">
				<view class="photoHead"><image :src="item.cover" mode=""></image></view>
				<view class="photoCenter">
					<view class="photoTop">{{ item.title }}(商品名）</view>
					<view class="photobot">欠: {{ qian(item) }}</view>
				</view>
				<view class="photoRight">
					<view class="photoTop">
						<image :src="item.all == true ? '../../static/client/butt2.png' : '../../static/client/butt1.png'" mode="" @click="selectedCheck(father)"></image>
						全部发货
					</view>
					<view class="photobot" @click="ShowBox(father)">
						{{ item.show == true ? '收起' : '展开' }}
						<image src="../../static/images/arrow_down.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="box" v-show="item.show">
				<view class="boxTop">
					<view class="boxLeft">规格(库存）</view>
					<view class="boxCenter">欠货</view>
					<view class="boxRight">退欠货数</view>
				</view>
				<view class="boxbot" v-for="(child, index) in item.product_list">
					<view class="boxLeft">{{ child.spec_data[0] + '/' + child.spec_data[1] }}</view>
					<view class="boxCenter">{{ child.operate_num }}</view>
					<view class="boxRight">
						<stepper
							style="float: right;"
							:defaultValue="item.all==true?child.number:0"
							size="small"
							:min="0"
							:max="child.operate_num"
							:childindex="father"
						
							@change="changeNum"
						></stepper>
					</view>
				</view>
			</view>
		</view>
		<view class="but">
			<view class="butLeft">本次发货总数：{{ade}}</view>
			<button type="primary" @click="gowuliu">确认退欠货</button>
		</view>
	</view>
</template>

<script>
// import stepper from '../../components/stepper/stepper.vue';
export default {
	data() {
		return {
			arry: [],
			addy: '',
			fatherIndex: '',
			sum: '',
			ade:0,
		};
	},
	onShow() {
		this.addy = uni.getStorageSync('line');
		this.arry = uni.getStorageSync('goodlist');

		this.arry.forEach(item => {
			item.all = false;
		});
		this.arry.forEach(item => {
			item.product_list.forEach(item => {
				item.number = 0;
			});
		});
		console.log(this.arry);
	},
	methods: {
		gowuliu(){
			uni.navigateTo({
				url:'returntwo'
			})
			uni.setStorage({
				key:"qiana",
				data:this.arry
			})
		
		},
		qian(item) {
			// console.log(item);
			let c = 0;
			item.product_list.forEach(item => {
				c = +item.owe_num + c;
			});
			return c;
		},
		allaw() {
			if (this.sum == 0) {
				this.arry.forEach((item, index) => {
					item.all = true;
					this.$set(this.arry, index, item);
				});
				this.arry.forEach(item => {
					item.product_list.forEach(item => {
						item.number = item.owe_num;
					});
				});
				// console.log(this.show);
				this.$set(this.arry);
				this.sum = 1;
			} else {
				this.arry.forEach((item, index) => {
					item.all = false;
					this.$set(this.arry, index, item);
				});
				this.arry.forEach((item, index) => {
					item.product_list.forEach(item => {
						item.number = '0';
					});
				});
				this.sum = 0;
			}
			console.log(this.arry);
		},
		allNumber(){
			let c=0
		this.arry.forEach((item, index) => {
			item.product_list.forEach(item => {
				c=+item.number+c
			});
		});
		console.log(c);
		this.ade=c
	
		},
		changeNum(e) {
			// console.log(e);
			this.arry[e.childindex].product_list[0].number=e.num
			console.log(this.arry);
		this.allNumber()
		},
		ShowBox(index) {
			this.arry[index].show = !this.arry[index].show;

			this.$set(this.arry, index, this.arry[index]);
			// console.log(this.goodList[index].show);
		},
		selectedCheck(inedx) {
		console.log(inedx);
			this.arry[inedx].all = !this.arry[inedx].all;
			this.$set(this.arry, inedx, this.arry[inedx]);
			if (this.arry[inedx].all == true) {
				this.arry[inedx].product_list.forEach(item => {
					item.number = item.owe_num;
				});
			} else {
				this.arry[inedx].product_list.forEach(item => {
					item.number = 0;
				});
			}
		
			console.log(this.arry);
		}
	}
};
</script>

<style lang="less">
page {
	background-color: #f7f4f8;
}
.status_bar { height: var(--status-bar-height); width: 100%; }
.numberLeft {
	height: 51px;
	line-height: 51px;
	padding-left: 15px;
	padding-right: 15px;
	margin-top: 15px;
	background-color: #ffffff;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	font-size: 15px;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	border-bottom: 1px solid #eeeeee;
}

.head {
	height: 88rpx;
	line-height: 88rpx;
	background-color: #249af6;
	color: #ffffff;
	display: flex;
	justify-content: space-between;
	padding: 0 30rpx;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 500;
	image {
		width: 22rpx;
		height: 39rpx;
		margin-top: 25rpx;
	}
}
.number {
	height: 103rpx;
	line-height: 103rpx;
	padding-left: 30rpx;
	padding-right: 30rpx;
	margin-top: 30rpx;
	background-color: #ffffff;
	display: flex;
	justify-content: space-between;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	border-bottom: 2rpx solid #eeeeee;
	.numberRight {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
	}
}
.photo {
	height: 164rpx;
	background-color: #ffffff;
	padding-left: 30rpx;
	padding-right: 30rpx;
	padding-top: 30rpx;
	box-sizing: border-box;
	display: flex;
	.photoHead {
		height: 100rpx;
		width: 100rpx;
		// background-color: blue;
		border-radius: 50%;
		overflow: hidden;
		image {
			width: 100rpx;
			height: 100rpx;
		}
	}
	.photoCenter {
		margin-left: 36rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 36rpx;
	}
	.photobot {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
		line-height: 88rpx;
	}
	.photoRight {
		margin-left: 180rpx;
		.photoTop {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(102, 102, 102, 1);
			image {
				width: 32rpx;
				height: 32rpx;
				position: relative;
				left: -20rpx;
				top: 5rpx;
			}
		}
		.photobot {
			text-align: right;
			color: #249af6;
			image {
				width: 17rpx;
				height: 10rpx;
				margin-left: 20rpx;
			}
		}
	}
}
.box {
	// height: 212rpx;
	.boxTop {
		height: 100rpx;
		line-height: 100rpx;
		background-color: #eeeeee;
		display: flex;
		justify-content: space-between;
		padding: 0 100rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		border-bottom: 2rpx solid #cccccc;
	}
	.boxbot {
		height: 100rpx;
		line-height: 100rpx;
		background-color: #eeeeee;
		display: flex;
		justify-content: space-between;
		font-size: 30rpx;
		font-family: PingFang SC;
		padding: 0 100rpx;
		color: #666666;
		font-weight: 500;

		.boxCenter {
			position: relative;
			left: 110rpx;
		}
		.boxRight {
			box-sizing: border-box;
			padding-top: 30rpx;
			padding-left: 20rpx;
			position: relative;
			left: 30rpx;
		}
	}
}
.but {
	width: 100%;
	height: 110rpx;
	position: fixed;
	bottom: 0;
	background-color: #ffffff;
	display: flex;
	box-sizing: border-box;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	line-height: 110rpx;
	padding-left: 29rpx;
	.butLeft {
		width: 495rpx;
		background-color: #ffffff;
	}
	button {
		line-height: 110rpx;
		flex: 1;
		font-size: 30rpx;
	}
}
</style>
